<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="6">
                <lay-form-item label="关键字：" label-width="60">
                  <lay-input
                    v-model="qm.key" style="width: 90%" placeholder="类名"
                    :allow-clear="true" 
                  ></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="10">
                <lay-row>
                  <lay-col :md="12">
                    <lay-form-item label="更新日期：" label-width="70">
                      <lay-date-picker v-model="qm.dtb" placeholder="开始日期" allowClear simple ></lay-date-picker>                   
                    </lay-form-item>                    
                  </lay-col>
                  <lay-col :md="12">
                    <lay-form-item label="~" label-width="10">
                      <lay-date-picker v-model="qm.dte" placeholder="截至日期" allowClear simple></lay-date-picker>                   
                    </lay-form-item>      
                  </lay-col>
                </lay-row>
                 
              </lay-col>
              

              <lay-col :md="6">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table
            :page="page"
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="defaultToolbar"
            v-model:selectedKeys="selectedKeys"
            even
            @row="rowClick"
            @Change="pageChange"
            @sortChange="sortChange"
          >
            <template v-slot:toolbar>
              <lay-row>
                <lay-col :md="18">
                  <!-- <lay-button size="sm" type="primary" @click="Add">新增</lay-button>
                  <lay-button size="sm">删除</lay-button> -->
                </lay-col>
                <lay-col style="text-align:right;">
                   
                   
                  <lay-button prefix-icon="layui-icon-export" suffix-icon=""
                    @click="tableExport"
                    >导出</lay-button>

                </lay-col>
              </lay-row>
              
            </template>
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:operator="{data}">
              <lay-row>
                  <lay-col :md=24>
                    <lay-button size="xs"  
                      @click="createColumns(data)"
                    >生成Column</lay-button>
                    <lay-button size="xs"
                    @click="createJson(data)"
                    >JSON</lay-button>
                    <lay-button size="xs"
                    @click="createForm(data)"
                    >Form</lay-button>
                  </lay-col>
              </lay-row>
              <lay-row>
                  <lay-col :md=24>
                    <lay-button size="xs"
                      @click="createDto(data)"
                      >Dto</lay-button> 
                  </lay-col>
              </lay-row>
              
               

            </template>
           
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import createcolumn from "./createcolumn.vue";  
import createjson from "./createjson.vue";  
import createform from "./createform.vue";  
import createdto from "./createdto.vue";  
export default {
  setup() {
    const baseUrl="/htcls";
    const baseQUrl=baseUrl+"/page";
    const pageName="类";

    const myWin=ref<any>(null);
    const selectedKeys = ref(['']) 
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  ); 
    
    const columns = [
      // {
      //   title: '复选',
      //   width: '50px',
      //   type: 'checkbox',
      //   fixed: 'left'
      // },
      {
        title: '序号',
        width: '50px' ,
        key: 'rowNo'
      },
      {
        title: '项目',
        width: '100px' ,
        key: 'prjName'
      },
      { key:'name',title: '名称', width: '100px', },
      {
        title: '类名称',
        width: '200px', 
        key: 'fullName',
        sort: "desc" ,
        ellipsisTooltip: true
      },
      {
        title: '父类型',
        width: '100px',
        key: 'baseType',
        sort: "desc"
      },
      {
        title: '更新日期',
        width: '100px',
        key: 'edtDt',
        sort: "desc"
      },
      {
        title: '备注',
        width: '200px',
        key: 'memo',
        ellipsisTooltip: true
      },
      
      {
        title: '操作',
        width: '150px',
        customSlot: 'operator',
        // key: 'operator',
        fixed: 'right'
      }
    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {}

    const rowDoubleClick = function (data: any) {}

    const pageChange = function ({ current, limit }: any) {
      if(qm.pageSize!=limit)
      {
        qm.pageSize=limit ;
        qm.page=1;
        query(1); 
      }else{
        query(current)
      }
      

    }
    function toSearch() { 
      query(1);
    }
     
    function toReset() {
      qm.key= '';
      qm.dtb='';
      qm.dte='';       
    }

    const qm=reactive({
      key:"",
      dtb:"",
      dte:"", 
      page: 1,
      pageSize: 10,
      sortFields:"edtDt desc"
    }); 
    const query=async (pageIndex:number) =>{
      if(pageIndex){
        page.value.current=pageIndex;
        qm.page=pageIndex;
      }
      var r=await new MyHttp().page(baseQUrl,qm,
        { 
        },
        columns
      );  
      dataSource.value=r.data.records;  
      page.value.total=r.data.totalRow;
    }
    const Add=async()=>{
      
    }
    const sortChange = (key: any, sort: number) => {
      qm.sortFields=`${key} ${sort}`;
      query(0);
    }
    const tableExport=async()=>{
      
      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
        {
          qm:qm,
          url:baseQUrl,
          name:pageName,
          columns:cols,
          lx:"page"
        }
        );
    }
    const createColumns=(data:any)=>{
      let jo=JSON.parse(data.jsonFields); 
      var opt={
          title: '生成Column',
          content: h( createcolumn, 
            {  
              data:jo,               
            }
            ), 
          w:800,
          h:700
        }; 
        myWin.value.open(opt ); 
    }
    const createJson=(data:any)=>{
      let jo=JSON.parse(data.jsonFields); 
      var opt={
          title: '生成JSON',
          content: h( createjson, 
            {  
              data:jo,               
            }
            ), 
          w:800,
          h:700
        }; 
        myWin.value.open(opt ); 
    }
    const createForm=(data:any)=>{
      let jo=JSON.parse(data.jsonFields); 
      var opt={
          title: '生成Form',
          content: h( createform, 
            {  
              data:jo,               
            }
            ), 
            w:800,
            h:700
        }; 
        myWin.value.open(opt ); 
    }
    const createDto=(data:any)=>{
      let jo=JSON.parse(data.jsonFields); 
      var opt={
          title: '生成Dto',
          content: h( createdto, 
            {  
              data:jo,               
            }
            ), 
           w:800,
            h:700
        }; 
        myWin.value.open(opt ); 
    }
    
    onMounted(() =>{  
      myWin.value=new MyWin();
      query(1);
    });
    return {
      columns,
      dataSource,
      selectedKeys, 
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      toReset,
      toSearch,
       

      qm,
      query,
      Add,
      sortChange,
      tableExport,
      createColumns,
      createJson,
      createForm,
      createDto,
      myWin
    }
  }
}
</script>
